<template>
    <div class="homepage-hero-module" id="login-page">
        <div class="video-container">
            <div :style="fixStyle" class="filter">
                <div class="login-form">
                    <!-- 左边，图片 -->
                    <div class="login-left login">
                        <el-image :src="require('@/assets/login-inner.jpeg')"/>
                    </div>
    
                    <!-- 右边，管理端登录 -->
                    <div class="login-right login">
                        <div>
                            <div style="font-size: 30px; text-align: center; padding: 30px 0; color: #333">欢迎登录</div>
                            <el-tabs v-model="activeName" @tab-click="handleClick">
                                <el-tab-pane label="账号登录" name="first">
                                    <div class="login-form-page">
                                        <el-form ref="form" :model="form" size="normal" :role="rules">
                                            <el-form-item prop="username">
                                                <el-input prefix-icon="el-icon-user-solid" v-model="form.username"
                                                          placeholder="请输入账号"></el-input>
                                            </el-form-item>
                                            <el-form-item prop="password">
                                                <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password
                                                          placeholder="请输入密码"></el-input>
                                            </el-form-item>
                                            <el-form-item>
                                                <div style="display: flex">
                                                    <el-button style="width: 100%" type="primary" @click="login">登 录</el-button>
                                                </div>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="电话登录" name="second">
                                    <div class="login-form-page">
                                        <el-form ref="phoneForm" :model="form" size="normal" :role="phoneRules">
                                            <el-form-item prop="phone">
                                                <el-input prefix-icon="el-icon-mobile-phone" v-model="form.phone"
                                                          placeholder="请输入手机号"></el-input>
                                            </el-form-item>
                                            <el-form-item prop="checkCode"  class="checkCode">
                                                <el-input prefix-icon="el-icon-lock" clearable v-model="form.checkCode" placeholder="输入验证码"></el-input>
                                                <el-button @click.stop="sendCaptcha" type="primary" style="margin-left: 10px" v-if="show">验证码</el-button>
                                                <el-button type="primary" style="margin-left: 10px" v-if="!show" disabled>{{ count }}秒后重发</el-button>
                                            </el-form-item>
                                            <el-form-item>
                                                <div style="display: flex">
                                                    <el-button style="width: 100%" type="primary" @click="login">登 录</el-button>
                                                </div>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import {login} from "@/api/index/login";
import {activeRouter} from "@/utils/permission";

export default {
    name: "Login",
    data() {
        return {
            fixStyle: '',
            form: {
                remember: false,
                username: 'cloud',
                password: '000000',
    
                phone: '17809160681',
            },
    
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ],
            },
    
            phoneRules: {
                phone: [{ required: true, message: "账号不能为空", trigger: "blur" }],
                checkCode: [
                    { required: true, message: "验证码不能为空", trigger: "blur" },
                    { max: 4, message: "验证码为6位数字", trigger: "blur" },
                ],
            },
            
            activeName: 'first',
            show: true,
            count: "",
            timer: null,
        }
    },
    mounted() {
        sessionStorage.removeItem("user")
        window.onresize = () => {
            const windowWidth = document.body.clientWidth
            const windowHeight = document.body.clientHeight
            const windowAspectRatio = windowHeight / windowWidth
            let videoWidth
            let videoHeight
            if (windowAspectRatio < 0.5625) {
                videoWidth = windowWidth
                videoHeight = videoWidth * 0.5625
                this.fixStyle = {
                    height: windowWidth * 0.5625 + 'px',
                    width: windowWidth + 'px',
                    'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                    'margin-left': 'initial'
                }
            } else {
                videoHeight = windowHeight
                videoWidth = videoHeight / 0.5625
                this.fixStyle = {
                    height: windowHeight + 'px',
                    width: windowHeight / 0.5625 + 'px',
                    'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                    'margin-bottom': 'initial'
                }
            }
        }
        window.onresize()
    },
    methods: {
        handleClick(tab, event) {
        },
        
        // 登录
        login() {
            login(this.form.username, this.form.password).then(res => {
                if (res.data && res.code === 200) {
                    sessionStorage.setItem("manage-token", res.data.token)
                    sessionStorage.setItem("manage-user", JSON.stringify(res.data))
                    sessionStorage.setItem("manage-userName", res.data.nickname)
                    
                    sessionStorage.setItem("manage-menus", JSON.stringify(res.data.menus))
                    this.$message.success("登陆成功")
                    activeRouter() // 刷新路由
                    this.$router.push("/")  //登录成功之后进行页面的跳转，跳转到主页
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(err => {})
        },
        
        // 发送验证码
        sendCaptcha() {
            let TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000);
                this.getCode();
            }
        },
    
        //验证码
        getCode() {
            setTimeout(() => {
                this.form.checkCode = '265403';
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
            }, 1000 * 60);
        },
    },
}
</script>

<style scoped>
.homepage-hero-module,
.video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.video-container .poster img {
    z-index: 0;
    position: absolute;
}

.video-container .filter {
    z-index: 1;
    position: absolute;
    /*background: rgba(0, 0, 0, 0.4);*/
    width: 100%;
}

#login-page {
    background: url("../assets/bg.jpeg") no-repeat center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
}
.login-form {
    opacity: 0.6;
    width: 600px;
    height: 418px;
    border: 2px #28549d solid;
    margin: 10% 20%;
    background-color: #eaeef3;
    border-radius: 5px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
    display: flex;
}

.login {
    width: 50%;
    border: 1px #4870b3 solid;
}

.login-left >>> img {
    height: 416px;
    width: 298px;
}

.login-right{
    padding: 22px 35px;
}

/* 验证码 */
.checkCode ::v-deep .el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

</style>
